<template>
	<div class="select">
		<u-input v-model="inputValue" :select-open="show" @click="open" :placeholder="placeholder" readonly :clearable="true" :disabled="disabled" />
		<uni-icons v-if="!readonly" type="bottom" @click="open"></uni-icons>

		<u-popup v-model="show" mode="bottom" class="popup" height="54%" :mask-close-able="false">
			<div v-if="multiple">
				<div class="choose">多项选择</div>
				<div class="button">
					<u-button :ripple="true" :hair-line="false" :custom-style="cancelStyle" @click="cancel">取消</u-button>
					<u-button :ripple="true" :hair-line="false" :custom-style="confirmStyle" @click="onConfirm">确认</u-button>
				</div>
			</div>
			<div v-else>
				<div class="choose">单项选择</div>
				<div class="button">
					<u-button :ripple="true" :hair-line="false" :custom-style="cancelStyle" @click="cancel">取消</u-button>
					<u-button :ripple="true" :hair-line="false" :custom-style="confirmStyle" @click="onConfirm">确认</u-button>
				</div>
			</div>
			<div class="search">
				<u-search shape="round" v-model="searchValue" @change="changeSearch" v-if="filterable"></u-search>
			</div>
			<u-empty text="没有搜索结果" mode="search" v-if="!showList.length"></u-empty>
			<scroll-view class="list-wrapper" scroll-y>
				<div class="item" v-for="item in showList" :key="item.value + '' + flag" @click="confirm(item)">
					{{ item.label }}
					<u-icon name="checkbox-mark" v-if="item.checked" class="icon" color="#2979ff"></u-icon>
				</div>
			</scroll-view>
		</u-popup>
	</div>
</template>

<script>
export default {
	name: "vSelect",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: [String, Number, Array],
			default: "",
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		list: {
			type: Array,
			default: () => [],
		},
		placeholder: {
			type: String,
			default: "请选择",
		},
		multiple: {
			type: Boolean,
			default: false,
		},
		filterable: {
			type: Boolean,
			default: false,
		},
		readonly: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			show: false,
			inputValue: "",
			searchValue: "",
			showList: [].concat(this.list),
			chooseArr: [].concat(this.value),
			confirmStyle: {
				border: "0",
				padding: "0",
				margin: "0",
				fontSize: "28rpx",
				lineHeight: "40rpx",
				height: "40rpx",
				color: "#007AFF",
			},
			cancelStyle: {
				border: "0",
				padding: "0",
				margin: "0",
				fontSize: "28rpx",
				lineHeight: "40rpx",
				height: "40rpx",
			},

			flag: 0,
		}
	},

	components: {},

	computed: {},
	created() {
		console.log(this.readonly)
	},

	methods: {
		confirm(item) {
			if (this.multiple) {
				item.checked = !item.checked
			} else {
				if (this.inputValue === item.label) {
					this.inputValue = ""
				} else {
					this.list.forEach(item => {
						item.checked = false
					})
					item.checked = true
				}
				this.inputValue = item.label
				this.$emit("update:value", item.value)
				this.show = false
			}

			this.flag++
		},
		onConfirm() {
			let arr = []
			this.showList.forEach(item => {
				if (item.checked) {
					arr.push(item.value)
				}
			})
			this.chooseArr = arr
			this.$emit("update:value", this.chooseArr)
			this.show = false
			this.searchValue = ""
		},
		open() {
			if (this.disabled || this.readonly) return
			this.show = true
		},
		changeSearch(e) {
			if (!e) return (this.showList = [].concat(this.list))
			this.showList = this.list.filter(item => {
				return item.label.indexOf(e) !== -1
			})
		},
		cancel() {
			if (this.multiple) {
				this.showList.forEach(item => {
					item.checked = this.chooseArr.includes(item.value)
				})
			}
			this.show = false
		},
	},
	watch: {
		value: {
			immediate: true,
			handler(val) {
				if (this.multiple || Array.isArray(val)) {
					this.list.forEach(item => {
						item.checked = val.includes(item.value)
					})
					this.inputValue = val
						.map(item => {
							let label = this.list.find(i => i.value === item)
							return label ? label.label : ""
						})
						.join(",")
				} else {
					let label = this.list.find(item => item.value == val)
					this.inputValue = label ? label.label : ""
				}
				this.$emit("update:value", val)
			},
		},
		chooseArr: {
			immediate: true,
			deep: true,
			handler(val) {
				this.showList.forEach(item => {
					item.checked = val.includes(item.value)
				})
			},
		},
	},
}
</script>
<style lang="scss" scoped>
.select {
	width: 100%;
	display: flex;
	align-items: center;
}
.popup {
	padding: 0 10rpx 10rpx;
	.choose {
		padding-left: 20rpx;
		padding-top: 20rpx;
		color: #000;
		font-size: 30rpx;
	}
	.button {
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
	}
	.search {
		padding: 0 30rpx;
	}
	.list-wrapper {
		padding: 50rpx 0;
		display: flex;
		height: 550rpx;
		justify-content: center;
		align-items: center;
	}
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 50rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
		&:first-child {
			border-top: 1px solid #eee;
		}
	}
}
.icon {
}
</style>
